<template>
  <view class="hotel-detail-container">
    <view class="photo-group">
      <!-- s-{{start}}-e-{{end_time}} -->
      <view class="photo-box">
        <image v-if="photoMode === 1" :src="payload.image" mode="aspectFill"></image>
        <swiper v-else style="width:100%;height:100%" :indicator-dots="payload.images.length > 1" circular :autoplay="false" :interval="3000" :duration="1000">
          <swiper-item v-for="(item,index) in payload.images" :key="index">
            <image :src="item.image" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>
      <view v-if="payload.images && payload.images.length > 0" class="tab">
        <view class="tab-item" :class="{ active: photoMode === 1 }" @click="updatePhotoMode(1)">封面</view>
        <view class="tab-item" :class="{ active: photoMode === 2 }" @click="updatePhotoMode(2)">房型</view>
      </view>
    </view>
    <view class="hotel-base-info">
      <view class="name">{{payload.hotel_name}}</view>
      <view class="info-box">
        <view class="info">{{renderLabel}}</view>
        <!-- <view class="detail-btn">详情设施</view>
        <view class="arrow"></view> -->
      </view>
      <view class="addr-box">
        <view class="addr-info">
          <view class="addr-1">{{payload.subtitle}}</view>
          <view class="addr-2">{{payload.address}}</view>
        </view>
        <view class="addr-btn" @click="openLocation">
          <image class="icon" src="/hotel/static/icon/address-icon.png"></image>
          <view class="bt">地图</view>
        </view>
      </view>
    </view>

    <!-- <view v-if="false" class="form">
      <view class="cell">
        <view class="label">
          <view class="time-item">
            <view class="date">06月09日</view>
            <view class="day">今天</view>
          </view>
          <view class="line"></view>
          <view class="time-item">
            <view class="date">06月10日</view>
            <view class="day">明天</view>
          </view>
        </view>
        <view class="night">共1晚</view>
      </view>
      <view class="tags-wrapper">
        <view class="tags-list">
          <view class="tags-item">民宿</view>
          <view class="tags-item">含早餐</view>
          <view class="tags-item">双床房</view>
          <view class="tags-item">大床房</view>
        </view>
        <view class="btn">
          <view class="text">筛选</view>
          <view class="arrow"></view>
        </view>
      </view>
    </view> -->
    <!-- 0-时租， 1-酒店， 2-名宿 -->
    <view class="house-list-wrapper">
      <view v-for="(item, index) in roomData" :key="index" class="house-item" @click="skipRoom(item)">
        <image class="photo" :src="item.image" style="background:#f8f8f8" mode="aspectFill"></image>
        <view class="info-box">
          <view class="name">{{item.name}}</view>
          <view v-if="item.start_time && item.end_time" class="time">时间：{{item.start_time}}-{{item.end_time}}内，{{item.title}}</view>
          <view v-if="item.label" class="time" style="margin-bottom: 80rpx;">{{item.label}}</view>
          <!-- <view class="extra">入住当天18:00前可免费取消</view> -->
          <view class="bottom">
            <template v-if="item.price">
              <view class="unit">￥</view>
              <view class="money">{{item.price || '-'}}</view>
            </template>
            <view class="text">订</view>
          </view>
        </view>
      </view>
    </view>
    
    <view v-if="payload.facilities && payload.facilities.length > 0" class="selling-point-facilities">
      <view class="bt">卖点设施</view>
      <view class="selling-list">
        <view v-for="(item,index) in payload.facilities" :key="index" class="item">
          <image class="icon" :src="item.image" style="background-color: #ddd;"></image>
          <view class="name">{{item.name}}</view>
        </view>
      </view>
    </view>
    
    <view class="house-info-wrapper">
      <view class="title">卖点设施</view>
      <view class="title">酒店介绍</view>
      <view class="info">
        <rich-text :nodes="introNodes"></rich-text>
      </view>
      <view class="title">入住须知</view>
      <view class="info">
        <rich-text :nodes="noticeNodes"></rich-text>
      </view>
      <view class="title">周边娱乐</view>
      <rich-text :nodes="recreationNodes"></rich-text>
    </view>
    
    <view v-if="payload.comments && payload.comments.length > 0" class="comment-list-wrapper">
      <view class="bt">网友评价</view>
      <view class="comment-list">
        <view v-for="(item,index) in payload.comments" :key="index" class="comment-item">
          <view class="user">
            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
            <view class="name">{{item.username}}</view>
          </view>
          <view class="content">
            {{item.content}}
          </view>
          <view class="img-box">
            <image v-for="(sub,idx) in item.images" :key="idx" class="img-item" :src="sub" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }

  .hotel-detail-container {
    overflow: hidden;

    .photo-group {
      height: 480rpx;
      width: 100%;
      position: relative;

      .photo-box {
        width: 100%;
        height: 100%;

        image {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .tab {
        background: rgba(#151515, .62);
        border-radius: 28rpx;
        padding: 6rpx;
        position: absolute;
        left: 32rpx;
        bottom: 90rpx;
        @include flex;

        .tab-item {
          height: 40rpx;
          line-height: 40rpx;
          border-radius: 20rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          padding: 0 20rpx;

          &.active {
            background: #FFFFFF;
            color: #151515;
          }
        }
      }
    }

    .hotel-base-info {
      background-color: #FFFFFF;
      border-radius: 16rpx;
      padding: 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      margin-top: -10rpx;

      .name {
        font-size: 30rpx;
        font-weight: bold;
        color: #3C3D3E;
        margin-bottom: 20rpx;
      }

      .info-box {
        @include flex;
        margin-bottom: 30rpx;

        .info {
          flex: 1;
          overflow: hidden;
          color: #666;
          font-size: 24rpx;
        }

        .detail-btn {
          font-size: 24rpx;
          color: #333333;
        }

        .arrow {
          @include arrow;
        }
      }

      .addr-box {
        padding: 28rpx 0;
        background: #EAF7F0;
        border-radius: 16rpx;
        @include flex;

        .addr-info {
          flex: 1;
          box-sizing: border-box;
          padding-left: 34rpx;
          height: 114rpx;
          border-right: 1px solid #ddd;
          @include flex(column, flex-start, center);
          font-size: 24rpx;

          .addr-1 {
            color: #333333;
            font-weight: bold;
            margin-bottom: 20rpx;
          }

          .addr-2 {
            color: #666;
          }
        }

        .addr-btn {
          width: 160rpx;
          @include flex(column);

          .icon {
            width: 34rpx;
            height: 32rpx;
          }

          .bt {
            font-size: 24rpx;
            line-height: 34rpx;
            color: #3C3D3E;
          }
        }
      }
    }

    .form {
      margin: 30rpx;
      border-radius: 16rpx;
      background-color: #fff;
      overflow: hidden;
      padding: 0 30rpx;
      box-sizing: border-box;
      .tags-wrapper {
        @include flex;
        padding-bottom: 24rpx;
        .tags-list {
          flex: 1;
          overflow: hidden;
          @include flex(row,center,flex-start);
          .tags-item {
            height: 54rpx;
            line-height: 54rpx;
            background: #F5F6FA;
            border-radius: 8rpx;
            padding: 0 16rpx;
            font-size: 24rpx;
            color: #3C3D3E;
            margin-right: 20rpx;
          }
        }
        .btn {
          @include flex;
          .text {
            font-size: 24rpx;
            color: #3C3D3E;
            margin-right: 8rpx;
          }
          .arrow {
            width: 0;
            height: 0;
            border-left: 10rpx solid transparent;
            border-right: 10rpx solid transparent;
            border-top: 10rpx solid #3C3D3E;
          }
        }
      }
      .cell {
        @include flex;

        .label {
          flex: 1;
          height: 106rpx;
          line-height: 106rpx;
          font-size: 30rpx;
          color: #333;
          @include flex(row, center, flex-start);

          .time-item {
            color: #333;
            @include flex(row, center, flex-start);

            .date {
              font-size: 32rpx;
            }

            .day {
              font-size: 24rpx;
              margin: 6rpx 6rpx 0;
            }
          }

          .line {
            width: 18rpx;
            height: 2px;
            background-color: #999;
            margin: 0 30rpx;
          }
        }

      }
    }
  
    .house-list-wrapper {
      margin: 30rpx;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 0 30rpx;
      background-color: #fff;
      .house-item {
        padding: 30rpx 0;
        border-bottom: 1px solid #eee;
        @include flex;
        .photo {
          width: 198rpx;
          height: 238rpx;
          border-radius: 12rpx;
          margin-right: 24rpx;
        }
        .info-box {
          flex: 1;
          overflow: hidden;
          .name {
            font-weight: bold;
            font-size: 30rpx;
            line-height: 42rpx;
            color: #3C3D3E;
          }
          .time {
            font-size: 24rpx;
            line-height: 34rpx;
            color: #333333;
            margin: 12rpx 0;
          }
          .extra {
            font-size: 24rpx;
            line-height: 34rpx;
            color: #2A70F9;
            margin: 12rpx 0;
          }
          .bottom {
            @include flex(row,center,flex-end);
            color: #2A70F9;
            .unit {
              font-size: 24rpx;
            }
            .money {
              font-size: 30rpx;
              margin-left: 4rpx;
              margin-right: 14rpx;
              font-weight: bold;
            }
            .text {
              width: 68rpx;
              height: 42rpx;
              line-height: 42rpx;
              text-align: center;
              background: #2A70F9;
              border-radius: 4rpx;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
    
    .selling-point-facilities {
      background-color: #fff;
      margin: 30rpx;
      border-radius: 16rpx;
      overflow: hidden;
      .bt {
        font-size: 32rpx;
        line-height: 44rpx;
        color: #3C3D3E;
        padding-left: 30rpx;
        margin: 30rpx 0;
        font-weight: bold;
      }
      .selling-list {
        @include flex(row,center,flex-start,wrap);
        padding-top: 29rpx;
        padding-bottom: 33rpx;
        .item {
          width: 25%;
          @include flex(column);
          padding: 15rpx 0;
          .icon {
            width: 36rpx;
            height: 36rpx;
            margin-bottom: 14rpx;
          }
          .name {
            font-size: 24rpx;
            line-height: 34rpx;
            color: #333333;
          }
        }
      }
    }
    
    .house-info-wrapper {
      margin: 30rpx;
      border-radius: 16rpx;
      padding: 0 30rpx 22rpx;
      box-sizing: border-box;
      background-color: #fff;
      overflow: hidden;
      .title {
        font-size: 32rpx;
        font-weight: bold;
        line-height: 44rpx;
        color: #3C3D3E;
        margin: 30rpx 0;
      }
      .info {
        font-size: 24rpx;
        line-height: 34rpx;
        color: #333333;
        margin: 16rpx 0;
      }
    }
    
    .comment-list-wrapper {
      margin: 30rpx;
      padding: 30rpx 30rpx 10rpx;
      border-radius: 16rpx;
      background-color: #fff;
      box-sizing: border-box;
      .bt {
        font-size: 32rpx;
        color: #3C3D3E;
        font-weight: bold;
        line-height: 44rpx;
      }
      .comment-list {
        overflow: hidden;
        .comment-item {
          border-bottom: 1px solid #eee;
          &:last-child {
            border-bottom: none;
          }
          .user {
            @include flex;
            margin: 20rpx 0;
            .avatar {
              width: 60rpx;
              height: 60rpx;
              background-color: #f8f8f8;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 10rpx;
            }
            .name {
              font-size: 24rpx;
              color: #333333;
              flex: 1;
            }
          }
          .content {
            font-size: 24rpx;
            line-height: 34rpx;
            color: #333333;
            margin-bottom: 30rpx;
            .more {
              color: #2A70F9;
            }
          }
          .img-box {
            width: 100%;
            @include flex(row,flex-start,flex-start,wrap);
            .img-item {
              width: calc((100% - 40rpx) / 3);
              height: 196rpx;
              margin-right: 20rpx;
              margin-bottom: 20rpx;
              border-radius: 16rpx;
              overflow: hidden;
              background-color: #f8f8f8;
              &:nth-child(3n) {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
    
  }
</style>

<script>
  const { format } = require('@/utils/rich-text')
  const app = getApp()
  
  export default {
    data() {
      return {
        type: 1,
        payload: {
          images: [],
          label: [],
          facilities: [],
          comments: [],
          house_type: [],
          price_list: [],
        },
        photoMode: 1,
        detailType:0,
        start:'',
        end_time:''
      }
    },
    computed: {
      renderLabel() {
        return (this.payload?.label || []).join(' | ')
      },
      introNodes() {
        return format(this.payload?.intro || '')
      },
      noticeNodes() {
        return format(this.payload?.notice || '')
      },
      recreationNodes() {
        return format(this.payload?.recreation || '')
      },
      roomData() {
        return this.type === 1 ? this.payload.house_type : this.type === 2 ? this.payload.sale_house : this.payload.price_list
      }
    },
    onReady() {

    },
    watch: {
      
    },
    methods: {
      skipRoom(row) {
        console.log('row ===', row)
        if (this.type === 1) {
          app.globalData.roomInfo = JSON.parse(JSON.stringify({
            ...row,
            label: this.payload.label,
            check_in_time: this.payload.check_in_time,
            check_out_time: this.payload.check_out_time,
            score: this.payload.score || 0,
          }))
          uni.navigateTo({
            url: '/hotel/layout?type='+this.type
          })
        } else if( this.type === 2 ){
          uni.navigateTo({
            url: `/hotel/confirmOrder?type=${this.type}&start=${this.start}&end_time=${this.end_time}&room_type=${row.id}&price=${row.price}`
          })
          uni.setStorageSync('famousInfo', this.payload)
        } else {
          const data = {
            type:0,
            start: this.start,
            end_time: this.end_time,
            room_type_id:row.room_type_id,
            rentalPriceId: row.rental_price_id,
            hotelId:this.payload.id
          }
          uni.setStorageSync('timeInfo', data)
          uni.navigateTo({
            url: `/hotel/confirmOrder?hotelId=${this.payload.id}&roomTypeId=${row.room_type_id}&rentalPriceId=${row.rental_price_id}&type=${this.type}`
          })
        }
      },
      openLocation() {
        uni.openLocation({
          latitude: Number(this.payload.lat),
          longitude: Number(this.payload.lng),
          name: this.payload.hotel_name,
          address: this.payload.address
        })
      },
      loadRes() {
        // type  1-酒店，2--名宿， 0-时租房
        const saveData = app.globalData.hotelPayload
        this.start = saveData.start;
        this.end_time = saveData.end_time;
        let data = {
          id:this.payload.id,
          start : this.start,
          end_time : this.end_time
        }
        this.$api[this.type === 1 ? 'hotelDetailApi' : this.type === 2 ? 'famousLodgingDetailApi' : 'timeHotelDetailApi'](data).then(res => {
          this.payload = {
            ...this.payload,
            ...res.data
          }
        })
      },
      updatePhotoMode(photoMode) {
        this.photoMode = photoMode
      },
    },
    onLoad(options) {
      this.payload.id = options.id;
      
      this.type = Number(options?.type || '1')
      console.log('type ---> ', this.type, this.start, this.end_time)
      // type---0-时租房 ，1-酒店，2--名宿
      this.loadRes()
      if(this.type == 0){
        uni.setNavigationBarTitle({
          title:"时租房详情"
        })
      }else if(this.type == 1){
        uni.setNavigationBarTitle({
          title:"酒店详情"
        })
      }else if(this.type == 2){
        uni.setNavigationBarTitle({
          title:"民宿详情"
        })
      }
    }
  }
</script>